<template>
  <div style="display: flex">
    <div style="min-width: 20%;border-right: 5px solid #eeeeee;overflow: auto;"
         :style="{ height: curHeight + 'px'}">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <el-container>
      <div style="padding-left: 20px">
        <el-table
          :data="productData"
          border
          stripe
          :height="curHeight"
          ref="table"
          :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
          @row-dblclick="doubleClick"
          style="width: 100%;">
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55">
          </el-table-column>
          <el-table-column
            label="货号/条码"
            align="left"
            width="120"
            prop="sn">
          </el-table-column>
          <el-table-column
            label="商品名"
            align="left"
            width="250"
            prop="name"
          >
          </el-table-column>
          <el-table-column
            label="分类"
            width="120"
            align="left"
            prop="productCategoryName"
          >
          </el-table-column>
          <el-table-column
            label="单位"
            align="center"
            prop="unit"
          >
          </el-table-column>
          <el-table-column
            label="销售价"
            width="90"
            align="right"
            prop="price"
            sortable="custom"
          >
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="loadProduct"></pagination>
      </el-footer>
      <div style="display: flex;justify-content: flex-end;align-items: center">
        <el-button type="primary" @click="addClick">完成</el-button>
      </div>
    </el-container>
  </div>
</template>
<script>
  import {list} from '@/api/product'
  import {list as productCategoryList} from '@/api/productCategory'
  import utils from '../../../utils/utils.js'
  import Pagination from '@/components/Pagination';

  export default {
    data() {
      return {
        productData: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        productCategory: '',
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        data: [],
        chooseData: [],
        curHeight: null
      }
    },
    components: {Pagination},
    created() {
      this.loadProduct();
      this.loadProductCategoryList()
    },
    mounted() {
      this.comeIn();
      this.beforeMount()
    },
    filters: {},
    methods: {
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 400//减去页面上固定高度height
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.curHeight = h - 400//减去页面上固定高度height
          })();
        };
      },
      //商品list
      loadProduct() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('productCategory', _this.productCategory);
        list(params).then(response => {
          console.log(response)
          _this.productData = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
      //商品分类list
      loadProductCategoryList() {
        var _this = this
        let params = new URLSearchParams();
        productCategoryList(params).then(response => {
          console.log(response)
          _this.data = response.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      //过滤商品
      handleNodeClick(data) {
        console.log(data);
        this.productCategory = data.id
        this.loadProduct()
      },
      //选择商品
      handleSelectionChange(val) {
        console.log(val)
        this.chooseData = val
      },
      //切换分页保留选择
      getRowKeys(row) {
        return row.id
      },
      //双击添加商品
      doubleClick(val) {
        var goodsDetails = {
          productId: val.id,
          name: val.name,
          sn: val.sn,
          price: val.price,
          orders: val.orders,
          subTotal: val.price,
          cost: val.cost,
          amountPaid: 0,
          discount: 0,
          quantity: 1,
          spec: val.spec1 + val.spec2,
          unit: val.unit,
        };
        this.$emit('doubleClick', goodsDetails)
      },
      //关闭删除选择
      cancelClick() {
        this.$refs.table.clearSelection()
      },
      //选择添加商品
      addClick() {
        let chooseList = []
        this.chooseData.forEach(function (item) {
          var goodsDetails = {
            productId: item.id,
            name: item.name,
            sn: item.sn,
            price: item.price,
            orders: item.orders,
            subTotal: item.price,
            cost: item.cost,
            amountPaid: 0,
            discount: 0,
            quantity: 1,
            spec: item.spec1 + item.spec2,
            unit: item.unit
          };
          chooseList.push(goodsDetails)
        })
        this.$emit('addClick', chooseList)
        this.$refs.table.clearSelection()
      }
    }
  }
</script>

<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
  }
</style>
